<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        .clip-img {
            width: 200px;
            height: 400px;
            position: relative;
            margin: 100px auto;
            /*padding: 50px;*/
            background-color: yellow;
            border: 5px dashed red;
            background-image: url(images/bg-flowers.jpg);
            background-repeat: no-repeat;

            /*图片宽高百分百拉伸*/
            /*background-size: 100% 100%;*/

            /*宽100% 高度同比显示  不会拉伸  可能显示不全*/
            /*background-size: 100% auto;*/

            /*宽度同比显示 高度100%  不会拉伸  可能显示不全*/
            /*background-size: auto 100% ;*/

            /*按照大边同比缩放 可能显示不全*/
            /*background-size: cover;*/
            /*按照最小边同比缩放  可能显示不全*/
            background-size: contain;

            background-clip: content-box;
            /*background-origin: border-box;*/

        }

        /*总结：
                background-color  与    background-clip有关
                background-size   与     background-origin有关
        */

    </style>
</head>
<body>
<div class="clip-img">

</div>
</body>
</html>